<div class="row mb-3">
  <div class="col-6">
    <h3 class="primary-text m-0">{{ 'users.title_users' | translate }}</h3>
  </div>
  <div class="col-6 text-end">
    <button
      class="btn btn-elegant waves-effect m-0 me-2"
      (click)="openAddNewUser()"
      [attr.aria-label]="'users.button_add_user' | translate"
    >
      <i class="fas fa-user-plus"></i>
    </button>
    <button
      type="button"
      class="btn btn-elegant my-0 me-0"
      (click)="openSupport()"
      [attr.aria-label]="'support.title' | translate"
    >
      <i class="fa fa-question-circle-o"></i>
    </button>
  </div>
</div>
<div class="row">
  @for (user of homebridgeUsers; track user) {
  <div class="col-md-6 mb-4">
    <div class="card card-body">
      <div class="d-flex flex-column">
        <div class="d-flex flex-row mb-3">
          <span class="me-auto my-0">
            <h4>{{ user.name }}</h4>
            <h5 class="small text-truncate grey-text">
              <i
                class="fas"
                [ngClass]="{
                  'fa-user-secret': user.admin,
                  'fa-user': !user.admin,
                }"
              ></i>
              {{ user.username }}
            </h5>
          </span>
        </div>
        <div class="d-flex flex-row justify-content-between">
          @if (user.admin) { @if (user.otpActive) {
          <button class="btn btn-elegant m-0" (click)="disable2fa(user)" [disabled]="user.username !== username">
            {{ 'users.setup_2fa_disable' | translate }}
          </button>
          } @else {
          <button class="btn btn-primary m-0" (click)="setup2fa(user)" [disabled]="user.username !== username">
            {{ 'users.setup_2fa' | translate }}
          </button>
          } } @else {
          <div></div>
          }
          <div>
            <button
              class="btn btn-elegant m-0"
              (click)="openEditUser(user)"
              [attr.aria-label]="'form.button_edit' | translate"
            >
              <i class="fas fa-user-pen"></i>
            </button>
            <button
              class="btn btn-danger m-0 ms-2"
              (click)="deleteUser(user.id)"
              [attr.aria-label]="'form.button_delete' | translate"
              [disabled]="username === user.username"
            >
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  }
</div>
